<template>
	<view :style="themeColor()">
		<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
			<view v-if="!loading" class="pb-40rpx">
				<view class="pl-[40rpx] pr-[50rpx] bg-linear pb-[100rpx]">
					<!-- #ifdef MP-WEIXIN -->
					<!-- <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" /> -->
					<!-- #endif -->
					<view class="flex justify-between items-center pt-[40rpx]">
						<view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]">{{ formatOrderStatus(detail) }}</view>
						<image v-if="detail.status == 0" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/payment.png')"
							mode="aspectFit" />
						<image v-if="detail.status == 10" class="w-[180rpx] h-[140rpx]"
							:src="img('addon/shop/detail/deliver_goods.png')" mode="aspectFit" />
						<image v-if="detail.status == 20" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/receive.png')"
							mode="aspectFit" />
						<image v-if="detail.status == 30" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/complete.png')"
							mode="aspectFit" />
						<image v-if="detail.status == 40" class="w-[180rpx] h-[140rpx]" :src="img('addon/shop/detail/close.png')"
							mode="aspectFit" />
					</view>
				</view>
				<view class="sidebar-margin mt-[-86rpx] card-template">
					<view>
						<view class="flex items-center">
							<view>
								<u--image class="overflow-hidden" radius="var(--goods-rounded-mid)" width="100rpx" height="100rpx"
									:src="img(detail?.logo ? detail?.logo : '')" model="aspectFill">
									<template #error>
										<image class="w-[100rpx] h-[100rpx] rounded-[var(--goods-rounded-mid)] overflow-hidden"
											:src="img('addon/shop/store_default.png')" mode="aspectFill"></image>
									</template>
								</u--image>
							</view>
							<view class="flex flex-col ml-[20rpx]">
								<text class="text-[30rpx] font-500 text-[#303133] mb-[20rpx]">{{ detail?.nodeName }} </text>
								<text class="text-[24rpx] text-[var(--text-color-light6)] leading-[1.4]">{{ detail?.detailAddress
								}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="sidebar-margin card-template p-[0] py-[var(--pad-top-m)] overflow-hidden"
					:class="{ 'pb-[var(--pad-top-m)]': detail.gift_goods.length <= 0 }"
					:style="detail.delivery_type == 'virtual' ? 'margin-top: -86rpx' : 'margin-top: 20rpx'">
					<view class=" card-template-item justify-between px-[var(--pad-sidebar-m)]">
						<view class="text-[28rpx]">服务信息</view>
					</view>
					<view v-for="(goodsItem, goodsIndex) in detail.goods" :key="goodsIndex" class="px-[var(--pad-sidebar-m)]">
						<view class="order-goods-item flex justify-between flex-wrap mb-[20rpx]">
							<view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
								@click="goodsEvent(goodsItem.spuId)">
								<u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx" height="150rpx"
									:src="img(goodsItem.picUrl ? goodsItem.picUrl : '')" model="aspectFill">
									<template #error>
										<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
											:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
										</image>
									</template>
								</u--image>
							</view>
							<view class="ml-[20rpx] flex flex-1 flex-col box-border">
								<view class="flex justify-between items-baseline">
									<view class="max-w-[400rpx] text-[28rpx] leading-[40rpx] font-400 truncate text-[#303133]">
										<view class="brand-tag mr-[10rpx]">{{ formatSkuType(goodsItem.skuType) }} </view>{{
											goodsItem.spuName }}
									</view>

									<view class="text-right leading-[42rpx] ml-[10rpx] ">

									</view>
								</view>
								<view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
									<view>
										<view
											class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] mb-[10rpx]">
											<text v-if="goodsItem?.properties">{{ skuSpecFormat(goodsItem.properties) }}</text>
											<template v-if="goodsItem?.spuType == 2">
												<text>|</text>
												<text>{{
													filterCardAttributes(goodsItem, true, true) }}</text>
											</template>
										</view>

									</view>
									<text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ goodsItem.count
									}}</text>
								</view>
								<view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
									<view class="flex">
										<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)] mr-[6rpx]">
											消耗业绩:￥{{ fen2yuan(goodsItem.performancePrice) }} </view>
										<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)]">
											服务手工:￥{{ fen2yuan(goodsItem.servicesPrice) }} </view>
									</view>

								</view>
							</view>

						</view>

						<view class="flex justify-end items-center mt-[20rpx]" v-if="goodsItem?.employeeStr.length">
							<view class="flex items-baseline flex-wrap  justify-end">
								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">服务员工:
								</view>
								<view class="leading-[1]  mr-[6rpx]">
									<text class="text-[22rpx] leading-[26rpx] " v-for="item in goodsItem?.employeeStr" :key="item">
										{{ item.employeeName }} {{ item.proportion }}%
									</text>

								</view>
							</view>
						</view>
						<view class="flex justify-end items-center mt-[20rpx]" v-else>
							<view class="flex items-baseline flex-wrap  justify-end">
								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">服务员工:
								</view>
								<view class="leading-[1]  mr-[6rpx]">
									<text class="text-[22rpx] leading-[26rpx] " v-for="item in detail?.employeeStr" :key="item">
										{{ item.employeeName }} {{ item.proportion }}%
									</text>

								</view>
							</view>
						</view>

					</view>

				</view>
				<view class="sidebar-margin card-template p-[0] py-[var(--pad-top-m)] overflow-hidden"
					:class="{ 'pb-[var(--pad-top-m)]': detail.gift_goods.length <= 0 }"
					:style="detail.delivery_type == 'virtual' ? 'margin-top: -86rpx' : 'margin-top: 20rpx'">
					<view class=" card-template-item justify-between px-[var(--pad-sidebar-m)]">
						<view class="text-[28rpx]">划扣信息</view>
					</view>
					<view v-for="(goodsItem, goodsIndex) in detail.buckItems" :key="goodsIndex" class="px-[var(--pad-sidebar-m)]">

						<view class="order-goods-item flex justify-between flex-wrap mb-[20rpx]">
							<view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
								@click="goodsEvent(goodsItem.spuId)">
								<u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx" height="150rpx"
									:src="img(goodsItem.picUrl ? goodsItem.picUrl : '')" model="aspectFill">
									<template #error>
										<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
											:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
										</image>
									</template>
								</u--image>
							</view>
							<view class="ml-[20rpx] flex flex-1 flex-col box-border">
								<view class="flex justify-between items-baseline">
									<view class="max-w-[400rpx] text-[28rpx] leading-[40rpx] font-400 truncate text-[#303133]">
										<view class="brand-tag mr-[10rpx]">{{ formatSkuType(goodsItem.skuType) }} </view>{{
											goodsItem.spuName }}
									</view>


									<view class="text-right leading-[42rpx] ml-[10rpx] ">

									</view>
								</view>
								<view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
									<view>
										<view
											class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] mb-[10rpx]">
											<text v-if="goodsItem?.properties">{{ skuSpecFormat(goodsItem.properties) }}</text>
											<template v-if="goodsItem?.spuType == 2">
												<text v-if="goodsItem?.properties">|</text>
												<text>{{
													filterCardAttributes(goodsItem, true, true) }}</text>
											</template>
										</view>

									</view>
									<text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ goodsItem.count
									}}</text>
								</view>
								<view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
									<view class="flex">
										<!-- <view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)] mr-[6rpx]">
											上次结余:￥{{ fen2yuan(goodsItem.masterPrice || 0) }} </view> -->
										<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)] mr-[6rpx]">
											本次划扣:{{ goodsItem.price }} </view>
										<view class="text-[24rpx] font-400 leading-[34rpx] text-[var(--text-color-light6)]">
											当前剩余:{{ goodsItem.giveBalance }} </view>

									</view>

								</view>
							</view>

						</view>
						<!-- <view class="flex justify-end items-center ">
							<view class="flex items-baseline flex-wrap  justify-end">
								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">订单金额
								</view>
								<view class="leading-[1]  mr-[6rpx]">
									<text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
									<text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{
										parseFloat(diyGoods.fen2yuan(goodsItem.totalPrice)).toFixed(2).split('.')[0] }}</text>
									<text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{
										parseFloat(diyGoods.fen2yuan(goodsItem.totalPrice)).toFixed(2).split('.')[1] }}</text>
								</view>

								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">实付金额
								</view>
								<view class="leading-[1]   mr-[6rpx]">
									<text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
									<text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{
										parseFloat(diyGoods.fen2yuan(goodsItem.otherPrice)).toFixed(2).split('.')[0] }}</text>
									<text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{
										parseFloat(diyGoods.fen2yuan(goodsItem.otherPrice)).toFixed(2).split('.')[1] }}</text>
								</view>

								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">资产抵扣</view>
								<view class="leading-[1] text-[var(--price-text-color)] mr-[6rpx]">
									<text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
									<text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{
										parseFloat(diyGoods.fen2yuan(goodsItem.assetPrice)).toFixed(2).split('.')[0] }}</text>
									<text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{
										parseFloat(diyGoods.fen2yuan(goodsItem.assetPrice)).toFixed(2).split('.')[1] }}</text>
								</view>
								<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">
									剩余欠款
								</view>
								<view class="leading-[1] text-[var(--price-text-color)]  mr-[6rpx]">
									<text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
									<text class="text-[36rpx] font-500 leading-[28rpx] price-font">{{
										parseFloat(diyGoods.fen2yuan(goodsItem.subtotalPrice)).toFixed(2).split('.')[0] }}</text>
									<text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{
										parseFloat(diyGoods.fen2yuan(goodsItem.subtotalPrice)).toFixed(2).split('.')[1]
									}}</text><text class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]"></text>
								</view>
							</view>
						</view> -->
						<view class="flex items-center box-border mt-[8rpx]"
							v-if="goodsItem.employeeStr && goodsItem.employeeStr.length > 0">
							<view class="text-[24rpx]">销售员工</view>
							<view class="text-[24rpx]"><text v-for="item in goodsItem.employeeStr" :key="item">
									{{ item.employeeName }} {{ item.proportion }}%
								</text></view>
						</view>
					</view>
					<view class="pt-[20rpx] bg-[#f9f9f9] mt-[20rpx] mx-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)]"
						v-if="detail.gift_goods.length">
						<view class="order-goods-item flex justify-between flex-wrap px-[var(--pad-sidebar-m)] pb-[20rpx]"
							v-for="(goodsItem, goodsIndex) in detail.gift_goods" :key="goodsIndex">
							<view class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
								@click="goodsEvent(goodsItem.spuId)">
								<u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="120rpx" height="120rpx"
									:src="img(goodsItem.picUrl ? goodsItem.picUrl : '')" model="aspectFill">
									<template #error>
										<image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
											:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
										</image>
									</template>
								</u--image>
							</view>
							<view class="ml-[16rpx] py-[8rpx] flex flex-1 flex-col justify-between">
								<view class="flex items-center">
									<view
										class="bg-[var(--primary-color-light)] whitespace-nowrap text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center w-[64rpx] h-[34rpx] mr-[6rpx]">
										赠品</view>
									<view class="text-[26rpx] max-w-[400rpx] truncate leading-[40rpx] text-[#333]">{{ goodsItem.spuName
									}}
									</view>
								</view>
								<view class="flex items-center">
									<view v-if="goodsItem.properties"
										class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">
										{{ skuSpecFormat(goodsItem.properties) }}
									</view>
									<view class="ml-[auto] font-400 text-[26rpx] text-[#303133]">
										<text>x</text>
										<text>{{ goodsItem.count }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="sidebar-margin mt-[var(--top-m)] card-template">
					<view class="justify-between card-template-item">
						<view class="text-[32rpx]">订单信息 </view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">订单类型 </view>
						<view class="text-[28rpx]">{{ formatOrderType(detail) }}</view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">订单状态 </view>
						<view class="text-[28rpx]">{{ formatOrderStatus(detail) }}</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">订单来源</view>
						<view class="text-[28rpx]">{{ formatOrderSource(detail) }}</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">订单渠道</view>
						<view class="text-[28rpx]">{{ detail?.terminal }}</view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">{{ t('orderNo') }}</view>
						<view class="flex items-center text-[28rpx]">
							<text>{{ detail.no }}</text>
							<text class="w-[2rpx] h-[20rpx] bg-[#999] mx-[10rpx]"></text>
							<text class="text-[#EF900A]" @click="copy(detail.no)">复制</text>
						</view>
					</view>


					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">服务类型</view>
						<view class="text-[28rpx]">{{ detail.replaced ? '换卡服务' : '余卡服务' }}</view>
					</view>

					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">服务时间</view>
						<view class="text-[28rpx]">{{ timeFormat(detail.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>

					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">服务次数</view>
						<view class="text-[28rpx]">{{ detail?.productCount }}</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">消耗业绩</view>
						<view class="price-font font-500 text-[28rpx]">
							￥{{ fen2yuan(detail.performancePrice || 0) }}
						</view>
					</view>
					<view class=" card-template-item justify-between items-baseline">
						<view class="text-[28rpx]">服务手工</view>
						<view class=" price-font">
							￥{{
								fen2yuan(detail.servicesPrice || 0) || 0 }}
						</view>
					</view>
					<view class=" card-template-item justify-between items-baseline">
						<view class="text-[28rpx]">补差金额</view>
						<view class=" price-font">
							￥{{
								fen2yuan(detail.servicesPrice || 0) || 0 }}
						</view>
					</view>
					<!-- <view class=" card-template-item justify-between" v-if="detail?.employeeStr?.length > 0">
						<view class="text-[28rpx]">服务员工</view>
						<view class="text-[28rpx]"><text v-for="item in detail.employeeStr" :key="item">
								{{ item.employeeName }} {{ item.proportion }}%
							</text></view>
					</view> -->
				</view>
				<view class="sidebar-margin mt-[var(--top-m)] card-template">
					<view class="justify-between card-template-item">
						<view class="text-[32rpx]">会员信息 </view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">会员ID </view>
						<view class="text-[28rpx]">{{ detail?.user?.id }}</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">姓名|昵称</view>
						<view class="text-[28rpx]">{{ detail?.user?.nickname }}</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">性别</view>
						<view class="text-[28rpx]" v-if="detail?.user?.sex">{{ detail?.user?.sex == 2 ? '女' : '男' }}</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">手机号</view>
						<view class="text-[28rpx]">
							{{ detail?.user?.mobile || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">生日</view>
						<view class="text-[28rpx]">
							{{ detail?.user?.birthday || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">会员等级</view>
						<view class="text-[28rpx]">
							{{ detail?.user?.levelName || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">付费会员</view>
						<view class="text-[28rpx]">
							{{ detail?.user?.memberShipName || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">归属员工</view>
						<view class="text-[28rpx]">
							{{ detail?.user?.employee || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">注册门店</view>
						<view class="text-[28rpx]">
							{{ detail?.user?.tenantName || '无' }}
						</view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">注册日期</view>
						<view class="text-[28rpx]">{{ timeFormat(detail?.user?.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">最近登录</view>
						<view class="text-[28rpx]">{{ timeFormat(detail?.user?.activeTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
				</view>
				<view class="sidebar-margin mt-[var(--top-m)] card-template">
					<view class="justify-between card-template-item">
						<view class="text-[32rpx]">操作信息 </view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">操作设备</view>
						<view class="text-[28rpx]">
							{{ detail?.terminal || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">IP地址</view>
						<view class="text-[28rpx]">
							{{ detail?.userIp || '无' }}
						</view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">操作时间</view>
						<view class="text-[28rpx]">{{ timeFormat(detail.updateTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>

					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">操作员工</view>
						<view class="text-[28rpx]">
							{{ detail?.updater || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">会员备注</view>
						<view class="text-[28rpx]">
							{{ detail?.userRemark || '无' }}
						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">订单确认</view>
						<view class="text-[28rpx]">

						</view>
					</view>
					<view class=" card-template-item justify-between">
						<view class="text-[28rpx]">交易须知</view>
						<view class="text-[28rpx]">

						</view>
					</view>
					<!-- <view class=" card-template-item justify-between">
						<view class="text-[28rpx]">商家备注</view>
						<view class="text-[28rpx]">
							{{ detail?.remark || '无' }}
						</view>
					</view> -->
				</view>
				<view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="detail?.orderStoreReasons?.length">
					<view class="justify-between card-template-item">
						<view class="text-[32rpx]">门店备注 </view>
					</view>
					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">
							<view v-for="(item, index) in detail?.orderStoreReasons" :key="index"> {{
								item.creator.split(':')[1] }} (ID:{{
									item.creator.split(':')[0] }})
								{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}【<text class="text-[var(--primary-color)]">{{
									item.reason
								}} </text>】</view>
						</view>
					</view>
				</view>
				<view class="sidebar-margin mt-[var(--top-m)] card-template">

					<view class="justify-between card-template-item">
						<view class="text-[28rpx]">服务门店 </view>
						<view class="text-[28rpx]">{{ detail?.nodeName }}</view>
					</view>
					<view class=" card-template-item justify-between" v-if="detail?.employeeStr.length">
						<view class="text-[28rpx]">服务员工</view>
						<view class="text-[28rpx]"><text v-for="item in detail?.employeeStr" :key="item" class="mr-5px">
								{{ item.employeeName }} (ID:{{ item.employeeId }}):{{ item.proportion }}%</text></view>
					</view>

				</view>
				<view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="
					detail?.logs
				">
					<view class="text-[32rpx] mb-[30rpx]">订单操作日志</view>

					<zero-timeline :dataList='detail?.logs' class="!p-[0]" :showLeft="false"></zero-timeline>

				</view>
				<view
					class="flex z-2 justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[120rpx] pl-[36rpx] pr-[20rpx] flex-wrap  pb-ios">
					<view class="flex">
						<view class="flex  mr-[34rpx] flex-col justify-center items-center" @click="orderBtnFn('index')">
							<view class="nc-iconfont nc-icon-shouyeV6xx11 text-[40rpx]"></view>
							<text class="text-[28rpx] mt-[10rpx]">首页</text>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<!-- <view>
							<nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
								:send-message-img="sendMessageImg">
								<view class="flex flex-col justify-center items-center">
									<view class="w-[40rpx] h-[40rpx] flex-center">
										<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[40rpx]"></text>
									</view>
									<text class="text-[20rpx] mt-[10rpx]">客服</text>
								</view>
							</nc-contact>
						</view> -->
						<!-- #endif -->
					</view>
					<view class="flex justify-end">

					</view>
				</view>
			</view>
			<view class="tab-bar-placeholder"></view>

		</view>

		<loading-page :loading="loading"></loading-page>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->

	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { img, redirect, copy, goback } from '@/utils/common';
import { getShopOrderDetail } from '@/addon/service/api/order';

import { topTabar } from '@/utils/topTabbar';
import { formatOrderStatus, formatOrderSource, skuSpecFormat, filterCardAttributes, timeFormat, formatOrderType, fen2yuan } from "@/utils/formatting"
import { formatSkuType } from '@/utils/formatting';

import { useGoods } from '@/addon/shop/hooks/useGoods'
const diyGoods = useGoods();
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '订单详情' })
/********* 自定义头部 - end ***********/




const detail: any = ref<Object>({});
const loading = ref<boolean>(true);
const orderId = ref('')


const sendMessageTitle = ref('')
const sendMessagePath = ref('')
const sendMessageImg = ref('')

const wxPrivacyPopupRef: any = ref(null)

onLoad((option: any) => {
	if (option.order_id) {
		orderId.value = option.order_id;
		orderDetailFn(orderId.value);
		// #ifdef MP
		nextTick(() => {
			if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		})
		// #endif
	} else {
		let parameter = {
			url: '/addon/shop/pages/order/list',
			title: '缺少订单id'
		};
		goback(parameter)
	}
});



const orderDetailFn = (id: any) => {
	loading.value = true;
	getShopOrderDetail({ id }).then(async (res: any) => {
		detail.value = res.data;
		if (res.data.items && res.data.items.length) {
			let obj: any = {};
			obj.order_goods_id = res.data.items[0].order_goods_id
			// getVerifyCodeFn(obj);
		}

		detail.value.goods = []; //购买商品
		detail.value.gift_goods = []; //赠品
		detail.value.items.forEach((item: any,) => {
			if (item.isSales) {
				detail.value.gift_goods.push(item);
			} else {
				detail.value.goods.push(item);
			}
		})
		detail.value.logs.forEach((item: any) => {
			item.time = timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')

			item.content = item.content.replace(/<br\/>/g, '\n')
		})


		sendMessageTitle.value = detail.value.items[0].titleName || detail.value.items[0].spuName
		sendMessageImg.value = img(detail.value.items[0].picUrl || '')
		loading.value = false;
	}).catch(() => {
		loading.value = false;
	})
}






const goodsEvent = (id: number) => {
	// if (detail.value.activity_type == 'exchange') {
	// 	redirect({
	// 		url: '/addon/shop/pages/point/detail',
	// 		param: {
	// 			id: detail.value.relate_id
	// 		}
	// 	})
	// } else {
	// 	redirect({
	// 		url: '/addon/shop/pages/goods/detail',
	// 		param: {
	// 			goods_id: id
	// 		}
	// 	})
	// }
}

const payRef = ref(null)
const orderBtnFn = (type = '') => {
	if (type == 'index') {
		redirect({
			url: '/addon/shop/pages/index',
			mode: 'reLaunch'
		});
	}

}








</script>
<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

.text-item {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.order-goods-item:nth-child(1) {
	margin-top: 0rpx;
}

.text-color {
	color: $u-primary;
}

.bg-color {
	background-color: $u-primary;
}

.bg-linear {
	background: linear-gradient(94deg, #F84949 8%, #FF9A68 99%);
}

.triangle {
	@apply relative;

	&::before {
		content: "";
		@apply absolute;
		width: 0;
		height: 0;
		position: absolute;
		bottom: -40rpx;
		border: 20rpx solid #EEF3FF;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}
}

.tab-bar-placeholder {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

:deep(.u-image__error) {
	background-color: transparent !important;
}
</style>
